React有一些內建的Hooks（例如useState、useEffect、useContext等）以及自定義的Hooks。

這些Hooks可以讓你在函式型組件中共用邏輯，並使得程式碼更簡潔、可重用、易於測試。

今天用到useState hook，假設我們現在要透過button 點擊，讓變數和使用者互動做出變化。

首先從在上方import useState

import{ useState } from 'react' ;

name,和setName是我們自己定義的，這樣初始值會是 mario is 25 years old

const [name,setName] = useState('mario');
const  [age,setAge] = useState(25); 

寫上函式，設定當使用者click button時，setName和setAge要變成的值。

const handleClick = ( ) => {
      setName('luigi');
      setAge(30);
    }

Return 裡面寫上onclick時使用handle click 函式。

import{ useState } from 'react' ;

const Home = () => {

    //let name ='mario'; 
    const [name,setName] = useState('mario');
    const  [age,setAge] = useState(25); 

    const handleClick = ( ) => {
      setName('luigi');
      setAge(30);
    }
    return ( 
        <div className="home">
            <h2>Homepage</h2>
            <p>{ name } is {age } years old</p>
            <button onClick={handleClick}>Click me</button>
        </div>
     );
}
 
export default Home;

如果沒有React Hook，要寫出這種動態網頁功能，可能需要在要變化的地方標上id標籤，在函式裡面要先找到標籤，再對標籤做出改變。

相較起來使用React內建的Hook，就顯得簡潔易懂。

參考資料

Net Ninja